<template>
  <el-container>
    <el-row><common-head child-name="添加商品"></common-head></el-row>

    <el-main>
      <el-form v-model="commodity" class="demo-form-inline" style="text-align: left">

        <el-form-item style="font-size: medium; font-weight: bold" label="商品名称：">
          <el-input v-model="commodity.commodityName" placeholder="商品名称"></el-input>
        </el-form-item>

        <el-form-item style="font-size: medium; font-weight: bold" label="商品标题：">
          <el-input v-model="commodity.commodityTitle" placeholder="商品标题"></el-input>
        </el-form-item>

        <el-form-item style="font-size: medium; font-weight: bold" label="商品分类：">
          <el-select v-model="commodity.commodityCategory" size="small" placeholder="全部">
            <el-option label="大牌专区" value="大牌专区"></el-option>
            <el-option label="智能手环" value="智能手环"></el-option>
            <el-option label="智能秤" value="智能秤"></el-option>
            <el-option label="睡眠管理" value="睡眠管理"></el-option>
            <el-option label="营养健康" value="营养健康"></el-option>
            <el-option label="护理清洁" value="护理清洁"></el-option>
            <el-option label="智能手表" value="智能手表"></el-option>
            <el-option label="血压计" value="血压计"></el-option>
            <el-option label="运动户外" value="运动户外"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item style="font-size: medium; font-weight: bold" label="商品编码：">
          <el-input v-model="commodity.commodityCode" placeholder="商品编码"></el-input>
        </el-form-item>

        <el-form-item>
          <div style="font-size: 13px; font-weight: bold">商品图片</div>
          <el-upload
            v-model="commodity.commodityPicture"
            class="avatar-uploader"
            action="http://192.168.2.132:8888/oss/upload"
            :show-file-list="false"
            :on-success="onSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="commodity.commodityPicture" :src="commodity.commodityPicture" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item style="font-size: medium; font-weight: bold" label="商品价格：">
          <el-input v-model="commodity.commodityPrice" size="medium" placeholder="商品价格"></el-input>
        </el-form-item>

        <el-form-item style="font-size: medium; font-weight: bold" label="商品库存：">
          <el-input-number v-model="commodity.commodityStock" size="small" controls-position="right" :min="0"></el-input-number>
        </el-form-item>

        <el-form-item style="font-size: medium; font-weight: bold" label="商品描述：">
          <el-input v-model="commodity.commodityDescription" size="medium" type="textarea" :rows="2" placeholder="请输入内容"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
          <el-button type="primary" plain:true @click="cancel">取消</el-button>
        </el-form-item>

      </el-form>
    </el-main>
  </el-container>
</template>

<script>
  import commonHead from "../../system/common/commonHead";
  export default {
        name: "addCommodity",
        components:{commonHead},

        data(){
          return {
            //OSS相关参数
            image: '',
            dataObj: {
              policy: '',
              signature: '',
              key: '',
              OSSAccessKeyId: '',
              dir: '',
              host: ''
            },
            //图片上传相关
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,

            commodity: {
              commodityName: '',
              commodityTitle: '',
              commodityCategory: '',
              commodityCode: '',
              commodityPicture: '',
              commodityPrice: '',
              commodityStock: '',
              commodityDescription: ''
            },
          }
        },

          mounted(){

          },

        methods: {

          beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isLt2M) {
              this.$message.error('上传商品图片大小不能超过 2MB!');
            }
            return isLt2M;
          },

          onSuccess(response, file, fileList) {
            this.commodity.commodityPicture = response.url;
          },

          //保存商品信息
          save(file){

            this.axios.post("micro-mall-server/commodity/add", this.commodity).then(res => {
              if(res.data.code === 200){
                //成功信息提示
                this.$message({
                  type: 'success',
                  message: '操作成功',
                });
                //清空表单
                this.category = {};
                //跳转，应设计时间间隔
                this.$router.push({
                  path: 'goods_manage'
                })
              }else {
                //失败提示
                this.$message({
                  type: 'error',
                  message: '操作失败!',
                });
              }
            })
          },

          //取消添加
          cancel(){
            this.$router.push({
              path: 'goods_manage'
            })
          }
      }
    }
</script>

<style scoped>
  .demo-form-inline{
    position: absolute;
    top: 40%;
  }
  .box-card{
    position: absolute;
    top: 40%;
  }

  /deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
